<template>
  <!-- 搜索用户，返回用户id -->
  <el-select
    v-model="selectObject" :disabled="disabled" :loading="loading" :placeholder="placeholder" :remote-method="page"
    filterable remote reserve-keyword value-key="id" default-first-option
  >
    <el-option
      v-for="item in options" :key="item.id"
      :label="(item.depart?item.depart+',':'')+(item.center?item.center+',':'')+item.cn+','+item.sn+','+item.phone"
      :value="item.cn +':' +item.phone"
    />
  </el-select>
</template>
<script>
import {page} from "./user";

export default {
  name: "UserSelect",

  props: {
    value: {type: String, default: null},
    placeholder: {type: String, default: ''},
    disabled: {type: Boolean, default: false}
  },

  data() {
    return {
      selectObject: null,
      loading: false,
      options: [],
    }
  },
  watch: {
    'value': {
      handler(val) {
        this.options = []
        if (val !== null) {
          this.options.push(val)
        }
        this.selectObject = val
      }, immediate: true
    },
    'selectObject': {
      handler() {
        this.$emit('input', this.selectObject)
      }, immediate: true
    }
  },

  methods: {
    page(query) {
      const form = {
        selectSearch: query
      }
      page(form, 0, 20).then(res => {
        this.options = res.data.records
      })
    },
  }
}
</script>

<style scoped>

</style>
